<!-- child组件 -->
<template>
  <div id="child">
    <p>{{ userInfo.name }}</p>
    <button @click="changeUserInfo('李四')">修改姓名</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        name: '张三',
      },
    }
  },
  methods: {
    // 点击修改姓名时调用
    changeUserInfo(newName) {
      this.userInfo.name = newName
      // 调用父组件传给子组件的自定义changeName方法，触发父组件所对应的changeName方法，把用户新的名字使用参数传递
      this.$emit('changeName', newName)
    },
  },
}
</script>

<style lang="scss" scoped></style>
